<template>
    <div>
        <div class="btnbox">
            <uap-button type="primary" @click="open('success')" size="small">成功</uap-button>
            <uap-button type="primary" @click="open('warning')" size="small">警告</uap-button>
            <uap-button type="primary" @click="open('info')" size="small">消息</uap-button>
            <uap-button type="primary" @click="open('error')" size="small">错误</uap-button>
        </div>
        <div class="btnbox">
            <uap-button type="primary" @click="open1" size="small">成功</uap-button>
            <uap-button type="primary" @click="open2" size="small">警告</uap-button>
            <uap-button type="primary" @click="open3" size="small">消息</uap-button>
            <uap-button type="primary" @click="open4" size="small">错误</uap-button>
        </div>
    </div>
</template>

<script>

export default {

    data() {
        return {

        }
    },
    mounted(){
        console.log(this.$el)
    },
    methods: {
        open(type) {
            this.$message({
                type,
                center: true,
                message: '测试999'
            });
        },
        open1(){
            this.$message.success('这是一条成功消息');
        },
        open2(){
            this.$message.warning('这是一条警告消息');
        },
        open3(){
            this.$message('这是一条消息');
        },
        open4(){
            this.$message.error('这是一条错误消息');
        }
    },
}
</script>

<style lang="scss" scoped>
.btnbox{
    display: flex;
}
</style>
